<template>
  <div class="div">
    <!-- 1.请求接口
    2.拿到接口数据渲染到插件里面 -->
    <!-- //树形结构 -->
    <div class="mytre">
      <el-tree
        style="height: 100%; width: 220px; padding: 30px; border-radius: 5px"
        check-strictly
        :data="listData"
        node-key="id"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <div class="right">
      <!-- //机构信息 -->
      <el-card shadow="never" class="box-card">
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
        <el-form>
          <el-row>
            <el-col :span="8">
              <el-form-item label="机构编号" label-width="120px">
                <el-input v-model="formData.id" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构名称" label-width="120px">
                <el-input v-model="formData.name" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构类型" label-width="120px">
                <el-input v-model="formData.type" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="机构地址" label-width="120px">
            <el-row>
              <el-col :span="8">
                <el-select
                  v-model="formData.province.name"
                  :disabled="editDisabled"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="i in ['山东', '北京', '江苏']"
                    :key="i"
                    :label="i"
                    :value="i"
                  />
                </el-select>
              </el-col>
              <el-col :span="8" style="padding: 0 4px">
                <el-select
                  v-model="formData.city.name"
                  :disabled="editDisabled"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="i in [1, 2, 3]"
                    :key="i"
                    :label="i"
                    :value="i"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-select
                  v-model="formData.county"
                  :disabled="editDisabled"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="i in [1, 2, 3]"
                    :key="i"
                    :label="i"
                    :value="i"
                  />
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="详细地址" label-width="120px">
                <el-input v-model="formData.address" :disabled="editDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经度" label-width="120px">
                <el-input v-model="formData.longitude" disabled>
                  <template #suffix>
                    <div style="margin-right: 14px">E</div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纬度" label-width="120px">
                <el-input v-model="formData.latitude" disabled>
                  <template #suffix>
                    <div style="margin-right: 14px">N</div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="机构负责人" label-width="120px">
                <el-input
                  v-model="formData.managerName"
                  :disabled="editDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构电话" label-width="120px">
                <el-input v-model="formData.phone" :disabled="editDisabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" style="padding: 10px 30px" @click="editFn">
            {{ editDisabled === true ? '编辑' : '保存' }}
          </el-button>
        </el-row>
      </el-card>
      <!-- 员工信息 -->
      <el-card shadow="never" class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span>员工信息</span>
        </div>
        <div class="text item">
          <el-table
            :data="tableData"
            :stripe="true"
            style="width: 100%; border: 1px solid #eee"
          >
            <el-table-column type="index" :index="indexFn" label="序号" />
            <el-table-column prop="userId" label="员工编号" width="180" />
            <el-table-column prop="name" label="员工姓名" width="80" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="agency.name" label="所属机构" />
            <el-table-column prop="account" label="系统账号" />
            <el-table-column prop="station" label="系统角色" />
            <el-table-column prop="status" label="账号状态"> </el-table-column>
          </el-table>
        </div>
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :current-page="page"
            :page-sizes="[1, 2, 3, 4, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getstructureListApi,
  getbusinessInfoApi,
  getemployeeListApi
} from '@/api/wangdian'
export default {
  data() {
    return {
      total: 0, // 数据总数
      page: 1,
      pageSize: 5,
      editDisabled: true,
      loading: false,
      formData: {
        province: {},
        city: {},
        county: {}
      },
      tableData: [],
      listData: [], //树形列表接口详情数据
      defaultProps: {
        label: 'name'
      }
    }
  },
  created() {
    //1024982867475820033 在树形结构里面请求的id
    this.jgxx('1024982867475820033')
    this.getstructureList()
  },
  methods: {
    async jgxx(id) {
      this.loading = true
      const { data } = await getbusinessInfoApi(id)
      console.log(data)
      this.formData = data.data
      const list = {
        id,
        page: this.page,
        pageSize: this.pageSize
      }
      const res = await getemployeeListApi(list)
      this.tableData = res.data.data.items
      console.log(res.data.data)
      this.total = parseInt(res.data.data.counts)
      this.loading = false
    },
    async getstructureList() {
      this.loading = true
      //请求树形列表数据赋值给treeData
      const { data } = await getstructureListApi() // console.log(data.data)
      console.log(data)
      //JSON.parse解析字符串转为对象
      this.listData = JSON.parse(data.data) // console.log(this.treeData[0].id)
      console.log(this.listData)
      this.loading = false
    },
    // 编辑按钮
    editFn() {
      if (!this.editDisabled) {
        console.log(123)
      } else {
        this.editDisabled = false
        console.log(123)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.reqGetEmployee()
      this.page = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page = val
      // this.reqGetEmployee()
      console.log(`当前页: ${val}`)
    },
    indexFn(index) {
      // 每页的index是递增的
      // 每页起始序号从0开始，所以先加1
      // 每页的第一条数据的序号 = 1 + （页码数 - 1） * 数据条数
      // 每页的第一条数据的序号 = 1 + 前面页的总数条数
      return index + 1 + (this.page - 1) * this.pageSize
    }
  }
}
</script>

<style scoped>
.mytre {
  float: left;
}
.right {
  float: left;
  margin-left: 60px;
}
</style>